<template>
  <view class="trust-description-layer">
    <!-- 卡牌基本信息 -->
    <view class="card-info">
      <view class="card-header">
        <text class="card-icon">{{ cardData.icon }}</text>
        <text class="card-name">{{ cardData.name }}</text>
        <view class="card-rarity" :class="cardData.rarity">
          <text class="rarity-text">{{ getRarityText() }}</text>
        </view>
      </view>
      
      <text class="card-description">{{ cardData.description }}</text>
    </view>
    
    <!-- 信任效果描述 -->
    <view class="trust-effects" v-if="trustEffects.length > 0">
      <text class="effects-title">信任效果</text>
      <view class="effects-list">
        <view 
          class="effect-item" 
          v-for="effect in trustEffects" 
          :key="effect.id"
          :class="{ active: effect.active }"
        >
          <text class="effect-icon">{{ effect.icon }}</text>
          <view class="effect-content">
            <text class="effect-name">{{ effect.name }}</text>
            <text class="effect-desc">{{ effect.description }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 信任历史 -->
    <view class="trust-history" v-if="showHistory && trustHistory.length > 0">
      <text class="history-title">信任变化</text>
      <view class="history-list">
        <view 
          class="history-item" 
          v-for="record in recentHistory" 
          :key="record.id"
        >
          <text class="history-icon">{{ getHistoryIcon(record.reason) }}</text>
          <view class="history-content">
            <text class="history-reason">{{ record.reason }}</text>
            <text class="history-time">{{ formatTime(record.timestamp) }}</text>
          </view>
          <view class="history-change" :class="record.change > 0 ? 'positive' : 'negative'">
            <text class="change-text">{{ record.change > 0 ? '+' : '' }}{{ record.change }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 信任建议 -->
    <view class="trust-suggestions" v-if="trustSuggestions.length > 0">
      <text class="suggestions-title">信任建议</text>
      <view class="suggestions-list">
        <view 
          class="suggestion-item" 
          v-for="suggestion in trustSuggestions" 
          :key="suggestion.id"
        >
          <text class="suggestion-icon">{{ suggestion.icon }}</text>
          <text class="suggestion-text">{{ suggestion.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TrustDescriptionLayer',
  props: {
    cardData: {
      type: Object,
      required: true
    },
    trustValue: {
      type: Number,
      default: 50
    },
    trustHistory: {
      type: Array,
      default: () => []
    },
    showHistory: {
      type: Boolean,
      default: true
    }
  },
  
  computed: {
    trustEffects() {
      const effects = []
      
      if (this.trustValue >= 90) {
        effects.push({
          id: 'divine_blessing',
          name: '神圣祝福',
          icon: '✨',
          description: '获得神圣祝福，所有效果翻倍',
          active: true
        })
      }
      
      if (this.trustValue >= 80) {
        effects.push({
          id: 'perfect_trust',
          name: '完美信任',
          icon: '💎',
          description: '完美信任状态，获得额外奖励',
          active: true
        })
      }
      
      if (this.trustValue >= 60) {
        effects.push({
          id: 'cooperation_boost',
          name: '协作加成',
          icon: '🤝',
          description: '协作效果提升30%',
          active: true
        })
      }
      
      if (this.trustValue <= 20) {
        effects.push({
          id: 'suspicion',
          name: '怀疑状态',
          icon: '⚠️',
          description: '处于怀疑状态，效果降低',
          active: true
        })
      }
      
      if (this.trustValue <= 10) {
        effects.push({
          id: 'broken_trust',
          name: '信任破裂',
          icon: '💔',
          description: '信任完全破裂，需要修复',
          active: true
        })
      }
      
      return effects
    },
    
    recentHistory() {
      return this.trustHistory.slice(0, 3)
    },
    
    trustSuggestions() {
      const suggestions = []
      
      if (this.trustValue >= 80) {
        suggestions.push({
          id: 'maintain',
          icon: '💎',
          text: '保持当前信任水平，继续合作'
        })
      } else if (this.trustValue >= 50) {
        suggestions.push({
          id: 'improve',
          icon: '📈',
          text: '通过更多合作提升信任值'
        })
      } else if (this.trustValue >= 20) {
        suggestions.push({
          id: 'repair',
          icon: '🔧',
          text: '需要积极修复信任关系'
        })
      } else {
        suggestions.push({
          id: 'urgent',
          icon: '🚨',
          text: '信任关系危急，需要立即修复'
        })
      }
      
      return suggestions
    }
  },
  
  methods: {
    getRarityText() {
      const rarities = {
        common: '普通',
        rare: '稀有',
        epic: '史诗',
        legendary: '传说'
      }
      return rarities[this.cardData.rarity] || '未知'
    },
    
    getHistoryIcon(reason) {
      if (reason.includes('协作')) return '🤝'
      if (reason.includes('背叛')) return '⚠️'
      if (reason.includes('宽恕')) return '🙏'
      if (reason.includes('忠诚')) return '💎'
      if (reason.includes('修复')) return '🔧'
      return '📝'
    },
    
    formatTime(timestamp) {
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) return '刚刚'
      if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
      if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
      return Math.floor(diff / 86400000) + '天前'
    }
  }
}
</script>

<style scoped>
.trust-description-layer {
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  margin: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

/* 卡牌信息 */
.card-info {
  margin-bottom: 20rpx;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.card-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.card-name {
  flex: 1;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

.card-rarity {
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-size: 16rpx;
  font-weight: bold;
}

.card-rarity.common {
  background: #e0e0e0;
  color: #666;
}

.card-rarity.rare {
  background: #4caf50;
  color: white;
}

.card-rarity.epic {
  background: #9c27b0;
  color: white;
}

.card-rarity.legendary {
  background: #ff9800;
  color: white;
}

.rarity-text {
  font-size: 14rpx;
}

.card-description {
  font-size: 20rpx;
  color: #666;
  line-height: 1.4;
}

/* 信任效果 */
.trust-effects {
  margin-bottom: 20rpx;
}

.effects-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.effect-item {
  display: flex;
  align-items: center;
  padding: 8rpx 12rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.effect-item.active {
  background: rgba(76, 175, 80, 0.1);
  border-left: 4rpx solid #4caf50;
}

.effect-icon {
  font-size: 20rpx;
  margin-right: 8rpx;
}

.effect-content {
  flex: 1;
}

.effect-name {
  font-size: 18rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 2rpx;
}

.effect-desc {
  font-size: 16rpx;
  color: #666;
}

/* 信任历史 */
.trust-history {
  margin-bottom: 20rpx;
}

.history-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 8rpx 12rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.history-icon {
  font-size: 18rpx;
  margin-right: 8rpx;
}

.history-content {
  flex: 1;
}

.history-reason {
  font-size: 16rpx;
  color: #333;
  display: block;
  margin-bottom: 2rpx;
}

.history-time {
  font-size: 14rpx;
  color: #999;
}

.history-change {
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
  font-size: 14rpx;
  font-weight: bold;
}

.history-change.positive {
  background: #e8f5e8;
  color: #4caf50;
}

.history-change.negative {
  background: #ffeaea;
  color: #f44336;
}

.change-text {
  font-size: 12rpx;
}

/* 信任建议 */
.trust-suggestions {
  margin-bottom: 20rpx;
}

.suggestions-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 8rpx 12rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8rpx;
}

.suggestion-icon {
  font-size: 18rpx;
  margin-right: 8rpx;
}

.suggestion-text {
  font-size: 16rpx;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-description-layer {
    margin: 12rpx;
    padding: 16rpx;
  }
  
  .card-name {
    font-size: 22rpx;
  }
  
  .card-description {
    font-size: 18rpx;
  }
  
  .effects-title,
  .history-title,
  .suggestions-title {
    font-size: 20rpx;
  }
}
</style>

